<template>
  <div class="px-2">
    <div class="header color-default">
      <div class="img">
        <img :src="img.result" alt="考试得分">
      </div>
      <div class="text">
        考试得分
      </div>
      <div class="text point">{{examInfo.score}}</div>
    </div>
    <div class="class-title color-dark">
      {{courseInfo.title}}
    </div>
    <div class="statistic color-default">
      <div class="use-time">
        用时：{{examInfo.duration}}分钟
      </div>
      <div class="result">
        <span class="text">答题数：{{examInfo.count}}题</span>
        <span class="text">正确：{{examInfo.right}}题</span>
        <span class="text">错误：{{examInfo.wrong}}题</span>
      </div>
    </div>
    <div class="button-group">
      <div class="x-row">
        <div class="x-col-4 btn">
          <mt-button type="primary" class="bg-light-blue" @click="quit">退出</mt-button>
        </div>
        <div class="x-col-4 btn"><mt-button type="primary" class="bg-orange" @click="showWrongList">错题回看</mt-button></div>
        <div class="x-col-4 btn">
          <mt-button type="primary" class="bg-light-blue" @click="test" style="padding-left: 0; padding-right: 0">再次考试
            <span v-if="examType == '1'"> ({{examInfo.retrytime || 0}}/3)</span>
          </mt-button>
        </div>
      </div>
    </div>
    <my-dialog ref="wrongDialog" v-bind="{
      title: '错题回看'
    }" @confirm="closeDialog" style="height: 90%;">
      <div class="option-list" slot="content">
        <div class="option-item" v-for="(item, index) in wrongList" :key="index">
          <div class="item-title">题目：{{item.content}}</div>
          <div class="item">您的答案：{{item.opts[item.answer]}}</div>
          <div class="item">正确答案：{{item.opts[item.correctOption]}}</div>
          <div class="item">解析：{{item.explain}}</div>
        </div>
      </div>
    </my-dialog>
  </div>
</template>

<script>
import Dialog from '@/components/dialog'

import resultImg from '@/assets/images/exam/考试得分.png'
import examApi from '@/api/exam'
import indexApi from '@/api/index'
import { Toast } from 'mint-ui'
import { Const } from '@/consts'
import utils from '@/utils'

export default {
  data () {
    return {
      img: {
        result: resultImg
      },
      courseId: '',
      courseInfo: {},
      examInfo: {},
      examType: '0',
      wrongList: []
    }
  },

  components: {
    myDialog: Dialog
  },

  created () {
    this.getQueryParams();
    this.getCourseInfo();
  },

  mounted () {
    let wrongList = this.examInfo.wrongList || []
    let answerMap = this.examInfo.answerMap || {}
    let tmp = [];
    for (let i = 0; i < wrongList.length; i++) {
      let item = wrongList[i]
      let tmpItem = {
        opts: []
      }
      if (item.optiona) {
        tmpItem.opts[1] = item.optiona
      }

      if (item.optionb) {
        tmpItem.opts[2] = item.optionb
      }

      if (item.optionc) {
        tmpItem.opts[3] = item.optionc
      }

      if (item.optiond) {
        tmpItem.opts[4] = item.optiond
      }
      tmpItem.answer = item.currentoption == null ? answerMap[item.questionid] : item.currentoption
      tmpItem.content = item.content || ''
      tmpItem.explain = item.explain || ''
      tmpItem.correctOption = item.correctoption

      tmp.push(tmpItem)
    }

    this.wrongList = tmp
  },

  methods: {
    getQueryParams () {
      const courseId = this.$route.query && this.$route.query.courseId || '';
      const examType = this.$route.query && this.$route.query.examType || '';
      const examId = this.$route.query && this.$route.query.examId || '';

      if (!courseId) {
        Toast('出错了 ...');
        return;
      }

      this.examType = examType;
      this.examInfo = utils.get('EXAM-' + examId) || {};
      console.log('获取到考试结果信息', this.examInfo)
      this.courseId = courseId;
    },

    getCourseInfo () {
      indexApi.getCourse({
        params: {
          courseid: this.courseId
        }
      }).then(resp => {
        this.courseInfo = resp[Const.RESP_RESULT] || {}
      }).catch(resp => {
        // Toast('获取数据失败 ...')
        if (resp.statusCode == '200') {
          Toast(resp[Const.RESP_MESSAGE] || '获取信息失败');
        }
      })
    },

    quit () {
      // this.$router.push({
      //     path: '/index/courseInfo',
      //     query: {
      //         courseid: this.courseId
      //     }
      // });

      if (this.examInfo.retrytime >= 3 && this.examType == '1') {
        this.$router.replace({
          path: '/index/courseInfo',
          query: {
            courseid: this.courseId
          }
        })
      } else {
        this.$router.replace({
          path: '/exam/start',
          query: {
            courseId: this.courseId
          }
        })
      }

    },

    test () {

      const courseId = this.courseId;
      const examType = this.examType;

      if (!courseId) {
        return;
      }

      if (this.examInfo.retrytime >= 3 && examType == '1') {
        Toast('已经超过考试次数');
        return;
      }

      // examApi.startExam({
      //     params: {
      //         courseid: courseId,
      //         examtype: examType == '0' ? 'SIMULATION' : 'REAL'
      //     }
      // }).then((resp) => {
      //     const result = resp[Const.RESP_RESULT];
      //     if (result === true || (result && result[Const.RESP_RESULT] === true)) {
      //         this.$router.push({path: '/exam', query: {
      //             courseId: courseId,
      //             examType: examType
      //         }});
      //     } else {
      //         Toast('很抱歉，您暂时不能进行考试');
      //     }
      // }).catch((resp) => {
      //     // Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
      //     if (resp.statusCode == '200') {
      //         Toast(resp[Const.RESP_MESSAGE] || '出错了 ...');
      //     }
      // });

      if (examType == '1') {
        this.$router.replace({ path: '/exam/idverify', query: { courseId: courseId } })
      } else {
        this.$router.replace({          path: '/exam', query: {
            courseId: courseId,
            examType: '0'
          }        });
      }


    },

    showWrongList() {
      this.$refs.wrongDialog.open()
    },

    closeDialog() {
      this.$refs.wrongDialog.close()
    }
  }
}
</script>

<style lang="scss" scoped>
$scale: 1.2;
.header {
  .img img {
    width: 120px;
    margin-top: 60px;
    margin-bottom: 16px;
  }

  .text {
    font-size: 20px * $scale;
  }

  .point {
    margin-top: 24px;
    margin-bottom: 30px;
    font-size: 40px * $scale;
  }
}

.class-title {
  font-size: 15px * $scale;
}

.statistic {
  margin-top: 24px;
  margin-bottom: 40px;
  font-size: 14px * $scale;
  .result {
    margin-top: 12px;

    .text {
      padding-right: 10px;
    }
    .text:last-child {
      padding-right: 0;
    }
  }
}

.button-group {
  .mint-button {
    width: 100%;
    min-width: 96px;
    margin-bottom: 20px;
  }

  .btn {
    padding: 0 4px;
  }
}

.option-list {

  max-height: 250px;
  box-sizing: border-box;
  overflow-y: scroll;

  .option-item {
    border-bottom: 1px solid #dddddd;
    padding: 5px;
    margin-bottom: 10px;
    
    .item-title {
      font-weight: bold;
    }
    
    &:last-child {
      border-bottom: none;
    }
  }
}
</style>
